<template>
    <div class="tasklist">
      <h1> {{title}} </h1>
      <div :class="{task:true, unfinished: !item.status }" v-for="(item,index) in tasklist" :key="index">
        <input :checked="item.status" type="checkbox" @click="change(item.id)">
        <span> {{item.name}} </span>
        <span @click="del(item.id)">删除</span>
      </div>
      
    </div>
  </template>
  

<script setup>
import { storeToRefs } from 'pinia';

// 从对应的模块的文件中导入useTasklistStore  方法
import { useTasklistStore } from '../stores/tasklist';

// 调用userTaskliststore方法  获取store对象
var store = useTasklistStore()


// 解构store
var {tasklist,title,changeStatus,deleteTask} = storeToRefs(store);


var change = (id)=>{
    store.changeStatus(id);//调用仓库中的方法changeStatus，更改任务的状态
}
var del = (id)=>{
    store.deleteTask(id)
}
</script>

<style scoped>
.tasklist .task{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: rgb(33, 146, 216);
  color: white;
  margin: 10px;
}
.tasklist .task.unfinished{
  background-color: red;
}
</style>